<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{canSign ? ('Key Settings' | translate) : ('Read Only Wallets' | translate) }}
      </div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea no-bounce class="add-bottom-safe-area">
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title">
        <expandable-header-primary>
          {{canSign ? ('Key Settings' | translate) : ('Read Only Wallets' | translate) }}
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>
    <div class="subtitle-container" *ngIf="wallets && canSign">
      <div class="subtitle">
        {{'This key contains {walletsLength} wallets' | translate: { walletsLength: wallets.length } }}.
      </div>
      <div class="onboarding-modal" (click)="showKeyOnboardingSlides()">
        <ion-icon name="md-help-circle"></ion-icon>
      </div>
    </div>

    <label-tip class="no-arrowhead" *ngIf="!canSign" type="warn">
      <span label-tip-title translate>No Private Key</span>
      <div label-tip-body translate>
        Read Only wallets don't include the private key.
      </div>
    </label-tip>

    <ion-list class="settings-list bp-list">
      <button ion-item (click)="openWalletGroupName()">
        <div translate float-left>Key Name</div>
        <ion-note item-end>
          {{walletsGroup?.name}}
        </ion-note>
      </button>

      <ion-item-divider *ngIf="canSign">{{'Wallets' | translate}}
        <button class="reorder-option" ion-button item-end clear *ngIf="!showReorder && wallets?.length > 1" (click)="reorder()">
          <img src="assets/img/sort.svg">
        </button>
        <button class="reorder-option" ion-button item-end clear *ngIf="showReorder" (click)="reorder()">
          {{'Done' | translate}}
        </button>
      </ion-item-divider>
      <ion-list reorder="{{showReorder}}" (ionItemReorder)="reorderAccounts($event)">
        <button class="wallets-list" [attr.detail-none]="showReorder ? true : null" ion-item *ngFor="let wallet of wallets" (click)="openWalletSettings(wallet.id)">
          <coin-icon [coin]="wallet.coin" [network]="wallet.network" item-left></coin-icon>
          <ion-label>
            <div class="main-label">
              {{wallet.name}}
            </div>
          </ion-label>
          <ion-note *ngIf="wallet.hidden" item-end>
            {{'Hidden'|translate}}
          </ion-note>
        </button>
      </ion-list>
      <button ion-item detail-none class="create-button" *ngIf="wallets && wallets[0].canAddNewAccount" (click)="goToAddPage()">
        {{'Create a new wallet' | translate }}
      </button>

      <ion-item-divider *ngIf="canSign || touchIdAvailable">{{'Security' | translate}}</ion-item-divider>
      <button ion-item *ngIf="canSign" (click)="openBackupSettings()" [ngClass]="{warn: needsBackup}">
        <span translate>Backup</span>
        <ion-note *ngIf="needsBackup" class="wallet-warning" item-end>
          {{'Needs backup' | translate}}
        </ion-note>
      </button>

      <div *ngIf="canSign && !needsBackup">
        <ion-item class="with-label no-border">
          <ion-label>{{'Request Encrypt Password' | translate}}</ion-label>
          <ion-toggle [(ngModel)]="encryptEnabled" (ionChange)="encryptChange()"></ion-toggle>
        </ion-item>
        <label-tip type="info">
          <span label-tip-title translate>Password Not Recoverable</span>
          <div label-tip-body>
            <span translate>This password cannot be recovered. If this password is lost, funds can only be recovered by reimporting your 12-word recovery phrase.</span>
            <br>
            <a class="label-tip-link" (click)="openSupportEncryptPassword()" translate>Learn More</a>
          </div>
        </label-tip>
      </div>

      <button ion-item *ngIf="encryptEnabled && derivationStrategy !== 'BIP45'" (click)="openClearEncryptPasswordPage()">
        <span translate>Clear Encrypt Password</span>
      </button>

      <div *ngIf="touchIdAvailable">
        <ion-item>
          <ion-label [ngClass]="{'disabled': needsBackup}">{{'Request Fingerprint'| translate}}</ion-label>
          <ion-toggle [(ngModel)]="touchIdEnabled" (ionChange)="touchIdChange()"></ion-toggle>
        </ion-item>
      </div>


      <ion-item-divider *ngIf="canSign">{{'Advanced' | translate}}</ion-item-divider>

      <button *ngIf="!needsBackup && canSign && !isDeletedSeed" ion-item (click)="openQrExport()">
        <span translate>Export Key</span>
      </button>

      <button *ngIf="!needsBackup && canSign" ion-item (click)="openWalletGroupExtendedPrivateKey()">
        <span translate>Extended Private Key</span>
      </button>

      <button *ngIf="canSign" ion-item (click)="openWalletGroupDelete()">
        <span translate>Delete</span>
      </button>
    </ion-list>
  </div>
</ion-content>